@extends('layouts.'.getTheme())
@section('css')
<!-- <link href="{{asset(getThemeAssets('dataTables/datatables.min.css', true))}}" rel="stylesheet"> -->
<!-- <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main.css?v=1.0"/> -->
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<style type="text/css">
	.timeline-item p{
        font-size: 15px;
    }
    .timeline-item i,small{
        font-size: 14px;
    }
    #tip {
        background-color: #ddf;
        color: #333;
        border: 1px solid silver;
        box-shadow: 3px 4px 3px 0px silver;
        position: absolute;
        margin-bottom: 20px;
        top: 10px;
        right: 10px;
        border-radius: 5px;
        overflow: hidden;
        line-height: 20px;
    }
    #tip input[type="text"] {
        height: 25px;
        border: 0;
        padding-left: 5px;
        width: 280px;
        border-radius: 3px;
        outline: none;
    }   
    .button-group {
        bottom: 0px;
    } 
</style>
@endsection
@section('content')
<div class="row wrapper border-bottom white-bg page-heading">
  <div class="col-lg-10">
    <h2>{!!trans('location.title')!!}</h2>
    <ol class="breadcrumb">
        <li>
            <a href="{{url('admin')}}">{!!trans('home.title')!!}</a>
        </li>
        <li class="active">
            <strong>{!!trans('location.subtitle')!!}</strong>
        </li>
    </ol>
  </div>
  <div class="col-lg-2">
    <div class="title-action">

    </div>
  </div>
</div>
<!-- ajax实时测点值信息获取 -->
        <div class="wrapper wrapper-content">
            <div class="row animated">
                <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>{!!trans('location.header')!!}</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="timeline.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="timeline.html#">Config option 1</a>
                                </li>
                                <li><a href="timeline.html#">Config option 2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                      <div id="container" style="width:100%; height:500px;"></div>
                      <div class="button-group">
                        <input type="button" class="button" value="绘制标记工厂" id="point"/>
                        <input type="button" class="button" value="绘制连线" id="line"/>
                        <input type="button" class="button" value="绘制局部面" id="polygon"/>
                        <input type="button" class="button" value="定位至当前位置" onClick="javascript:toolBar.doLocation()">

                      </div>
                        <div id="tip">
                            <input type="text" id="keyword" name="keyword" value="请输入关键字：(选定后搜索)" onfocus='this.value=""'/>
                        </div>
                    </div>
</div>
</div>
</div>
@endsection
@section('js')
  <!-- <script src="{{asset(getThemeAssets('plugins/jquery.dataTables.js', true))}}"></script> -->
  <!-- <script src="{{asset(getThemeAssets('dataTables/datatables.min.js', true))}}"></script> -->
  <script src="{{asset(getThemeAssets('layer/layer.js', true))}}"></script>
  <script src="https://webapi.amap.com/maps?v=1.4.0&key=d73daa177cc3a6f21e81162568448a26"></script>
 <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
  <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
  <script>
    // 实例化地图对象
    var map = new AMap.Map('container', {
      // 地图风格
      mapStyle: 'amap://styles/fresh',
        resizeEnable: true,
        zoom:11,
        center: [120.56733, 31.89567]
    });

    // map.setFeatures("building");
    // 设立marker标记
    var lnglats=[//也可以使用LngLat对象
        [120.52744,31.89565],[120.57750,31.89569],
        [120.56731,31.89564],[120.59768,31.89566],
        [120.54731,31.88564]
        ];
    var infoWindow = new AMap.InfoWindow();
    for(var i = 0, marker; i < lnglats.length; i++){
        marker=new AMap.Marker({
            position:lnglats[i],
            map:map
        });
        marker.content='当前系统下，gc公司第' +i+'工厂：<br>'
                      +'车间数：3 <br>'
                      +'工段数：4 <br>'
                      +'电气室数：5 <br>'
                      +'<p style="color:red;">报警点个数：0</p>'
                      +'<a href="{{url('admin/coring')}}" style="color:red; text-decoration:underline;">进入设备实时监测界面。</a>'
                      ;
        //给Marker绑定单击事件
        marker.on('click', markerClick);
    }

    // Click弹框
    function markerClick(e){
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
    }

    // 搜索框
      var windowsArr = [];
      var marker = [];
      AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
      var autoOptions = {
        city: "苏州", //城市，默认全国
        input: "keyword"//使用联想输入的input的id
      };
      autocomplete= new AMap.Autocomplete(autoOptions);
      var placeSearch = new AMap.PlaceSearch({
            city:'苏州',
            map:map
      })
      AMap.event.addListener(autocomplete, "select", function(e){
         //TODO 针对选中的poi实现自己的功能
         placeSearch.setCity(e.poi.adcode);
         placeSearch.search(e.poi.name)
      });
    });

    //地图中添加地图操作ToolBar插件
    var toolBar;
    var customMarker = new AMap.Marker({
        offset: new AMap.Pixel(-14, -34),//相对于基点的位置
        icon: new AMap.Icon({  //复杂图标
            size: new AMap.Size(27, 36),//图标大小
            image: "http://webapi.amap.com/images/custom_a_j.png", //大图地址
            imageOffset: new AMap.Pixel(-28, 0)//相对于大图的取图位置
        })
    });    
    map.plugin(["AMap.ToolBar"], function() {
        toolBar = new AMap.ToolBar({locationMarker: customMarker}); //设置地位标记为自定义标记
        map.addControl(toolBar);
    });

    map.setFitView();


  </script>
@endsection
